<template>
    <BasicModal
        v-bind="$attrs"
        title="发布通知"
        width="700px"
        okText="发布"
        @register="register"
        @cancel="cancelFn"
        @ok="okFn"
    >
        <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
            <a-form-item required label="标题">
                <a-input placeholder="请输入通知标题" v-model:value="form.title" />
            </a-form-item>
            <a-form-item required showCount label="内容">
                <a-textarea placeholder="请输入内容" v-model:value="form.content" />
            </a-form-item>
            <a-form-item required label="通知类型">
                <a-radio-group v-model:value="form.type">
                    <a-radio :value="1">系统通知</a-radio>
                    <a-radio :value="2">用户通知</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item required label="图片">
                <a-upload
                    :action="`${useGlobSetting().apiUrl}/adminUpload`"
                    method="post"
                    list-type="picture-card"
                    v-model:file-list="fileList"
                    @preview="handlePreview"
                    @change="handleChange"
                >
                    <div v-if="fileList.length === 0">
                        <plus-outlined />
                        <div class="ant-upload-text">Upload</div>
                    </div>
                </a-upload>
            </a-form-item>
        </a-form>
        <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" :style="'width: 100%'" :src="previewImage" />
        </Modal>
    </BasicModal>
</template>

<script lang="ts">
    import { defineComponent, reactive, onUpdated, toRaw, ref } from 'vue'
    import { PlusOutlined } from '@ant-design/icons-vue'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    import { AEParams } from '/@/api/notice/model'
    import { message, Modal, Radio } from 'ant-design-vue'
    import { addApi } from '/@/api/notice'
    import { FileItem, FileInfo } from './model'
    import { useGlobSetting } from '/@/hooks/setting'
    export default defineComponent({
        components: { BasicModal, Modal, PlusOutlined, Radio },
        setup(props, context) {
            console.log(props)
            /**
             * 响应式数据
             */
            const previewVisible = ref<boolean>(false)
            const previewImage = ref<string | undefined>('')
            // 表单
            const form = reactive({
                title: '',
                content: '',
                type: 1,
                image: '',
            })

            const fileList = ref<FileItem[]>([])

            // 定义响应式表单提交数据
            const formData: AEParams = reactive({
                title: '',
                content: '',
                type: 1,
                image: '',
            })

            // 初始化表格信息
            onUpdated(() => {
                if (getVisible) {
                }
            })

            // 弹窗管理
            const [register, { closeModal, getVisible, changeLoading }] = useModalInner()
            const cancelFn = () => {
                closeModal()
            }

            /*
             * 响应事件
             */
            function getBase64(file: File) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => resolve(reader.result)
                    reader.onerror = (error) => reject(error)
                })
            }

            const handleCancel = () => {
                previewVisible.value = false
            }
            const handlePreview = async (file: FileItem) => {
                if (!file.url && !file.preview) {
                    file.preview = (await getBase64(file.originFileObj)) as string
                }
                console.log(file.url)
                previewImage.value = file.url || file.preview
                previewVisible.value = true
            }
            const handleChange = ({ fileList: newFileList }: any) => {
                console.log(fileList?.value[0]?.response?.url)
                fileList.value = newFileList
                form.image = fileList?.value[0]?.response?.url
            }

            // 确认
            const okFn = async () => {
                try {
                    if (!form.title) {
                        message.error('标题不能为空')
                        return
                    }
                    if (!form.content) {
                        message.error('内容不能为空')
                        return
                    }
                    if (!form.image) {
                        message.error('图片不能为空')
                        return
                    }
                    const info = toRaw(form)
                    changeLoading(true)
                    const res = await addApi(info)
                    console.log(res)
                    changeLoading(false)
                    // 更新成功
                    message.success('添加成功!')
                    context.emit('updateData')
                    closeModal()
                } catch (err) {
                    changeLoading(false)
                    console.log(err)
                }
            }

            return {
                register,
                cancelFn,
                okFn,
                form,
                formData,
                fileList,
                handleCancel,
                handleChange,
                handlePreview,
                previewVisible,
                previewImage,
                useGlobSetting,
            }
        },
    })
</script>

<style></style>
